{% extends 'admin_dashboard.html' %}
{% block title %}客户管理{% endblock %}

{% block content %}
<div style="max-width: 1200px; margin: 20px auto; padding: 0 20px;">
  <div class="d-flex align-items-center mb-4" style="font-size: 20px; font-weight: bold; color: #333;">
    <i class="bi bi-people" style="font-size: 26px; color: #3f51b5; margin-right: 10px;"></i>
    客户管理
  </div>

  <!-- 查询卡片 -->
  <div class="card mb-4 p-4">
    <div class="d-flex align-items-center mb-3" style="font-size: 20px; font-weight: bold; color: #333;">
      <i class="bi bi-search" style="font-size: 24px; color: #3f51b5; margin-right: 10px;"></i>
      🔍查询客户
    </div>

    <form method="GET" action="{{ url_for('customers') }}" class="row gy-2 gx-3">

      <div class="col-sm-3">
        <label class="form-label">查询模式</label>
        <select name="mode" id="mode-select" class="form-select">
          <option value="">-- 请选择 --</option>
          <option value="exact" {{ 'selected' if mode == 'exact' }}>精确查询</option>
          <option value="fuzzy" {{ 'selected' if mode == 'fuzzy' }}>模糊查询</option>
          <option value="range" {{ 'selected' if mode == 'range' }}>范围查询</option>
        </select>
      </div>

      <div class="col-sm-3">
        <label class="form-label">字段</label>
        <select name="field" id="field-select" class="form-select">
          <option value="">-- 请选择 --</option>
          <option value="customerID" {{ 'selected' if field == 'customerID' }}>客户编号</option>
          <option value="customerName" {{ 'selected' if field == 'customerName' }}>客户姓名</option>
          <option value="PID" {{ 'selected' if field == 'PID' }}>身份证号</option>
          <option value="telephone" {{ 'selected' if field == 'telephone' }}>联系电话</option>
          <option value="address" {{ 'selected' if field == 'address' }}>联系地址</option>
        </select>
      </div>

      <!-- 精确/模糊查询 输入框 -->
      <div class="col-sm-4" id="value-container" style="display: none;">
        <label class="form-label">查询值</label>
        <input type="text" id="input-value" name="value" class="form-control" placeholder="请输入查询值" value="{{ value }}">
      </div>

      <!-- 范围查询 输入框 -->
      <div class="col-sm-4" id="range-container" style="display: none;">
        <label class="form-label">上限 / 下限</label>
        <div class="d-flex gap-2">
          <input type="text" name="low" class="form-control" placeholder="上限" value="{{ low }}">
          <input type="text" name="high" class="form-control" placeholder="下限" value="{{ high }}">
        </div>
      </div>

      <!-- 按钮单独一行 -->
      <div class="col-12 mt-3">
        <button type="submit" class="btn btn-gray me-2">查询</button>
        <a href="{{ url_for('customers') }}" class="btn btn-secondary me-2">重置</a>
        <a href="{{ url_for('add_customer') }}" class="btn btn-gray me-2">添加客户</a>
        <a href="{{ url_for('export_customers') }}" class="btn btn-gray">导出 CSV</a>
      </div>
    </form>
  </div>

  <!-- 客户列表卡片 -->
  <div class="card p-4 mt-4">
    <div class="d-flex justify-content-between align-items-center mb-3">
      <div class="d-flex align-items-center" style="font-size: 20px; font-weight: bold;">
        <i class="bi bi-card-list me-2" style="font-size: 24px; color: #3f51b5;"></i>
        客户列表
      </div>
    </div>

    <div class="table-responsive">
      <table class="table table-bordered align-middle table-hover">
        <thead class="table-light text-center">
          <tr>
            <th>客户编号</th>
            <th>客户姓名</th>
            <th>身份证号</th>
            <th>联系电话</th>
            <th>联系地址</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          {% if customers %}
            {% for c in customers %}
            <tr class="text-center">
              <td>{{ c.customerID }}</td>
              <td>{{ c.customerName }}</td>
              <td>{{ c.PID }}</td>
              <td>{{ c.telephone }}</td>
              <td>{{ 'Null' if c.address is none else c.address }}</td>
              <td>
                <a href="{{ url_for('edit_customer', id=c.customerID) }}" class="btn btn-outline-danger btn-sm me-2">编辑</a>
                <a href="{{ url_for('delete_customer', id=c.customerID) }}" class="btn btn-secondary btn-sm" onclick="return confirm('确认删除该客户？')">删除</a>
              </td>
            </tr>
            {% endfor %}
          {% else %}
            <tr>
              <td colspan="6" class="text-center text-muted">暂无客户信息</td>
            </tr>
          {% endif %}
        </tbody>
      </table>
    </div>
  </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function () {
  const modeSelect = document.getElementById('mode-select');
  const fieldSelect = document.getElementById('field-select');
  const inputValue = document.getElementById('input-value');
  const rangeInputs = document.getElementById('range-container');
  const valueContainer = document.getElementById('value-container');

  // 字段支持哪些查询模式
  const fieldSupport = {
    "customerID": ["exact", "fuzzy", "range"],
    "customerName": ["exact", "fuzzy"],
    "PID": ["exact", "fuzzy"],
    "telephone": ["exact", "fuzzy"],
    "address": ["exact", "fuzzy"]
  };

  // 控制字段选项是否可选
  function updateFieldOptions() {
    const mode = modeSelect.value;

    for (let option of fieldSelect.options) {
      const field = option.value;
      if (!field) continue;

      if (!mode || fieldSupport[field]?.includes(mode)) {
        option.disabled = false;
        option.title = "";
      } else {
        option.disabled = true;
        option.title = `字段【${option.textContent}】不支持当前查询模式`;
      }
    }

    if (fieldSelect.selectedOptions.length && fieldSelect.selectedOptions[0].disabled) {
      fieldSelect.value = "";
    }
  }

  // 控制输入框显示
  function updateInputDisplay() {
    const mode = modeSelect.value;
    if (mode === 'range') {
      valueContainer.style.display = 'none';
      rangeInputs.style.display = 'block';
    } else if (mode === 'exact' || mode === 'fuzzy') {
      valueContainer.style.display = 'block';
      rangeInputs.style.display = 'none';
    } else {
      valueContainer.style.display = 'none';
      rangeInputs.style.display = 'none';
    }
  }

  modeSelect.addEventListener('change', () => {
    updateFieldOptions();
    updateInputDisplay();
  });

  updateFieldOptions();
  updateInputDisplay();
});
</script>

{% endblock %}
